<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>陈杰</title>
        <!-- <link rel="stylesheet" href="css/normalize.css"> -->
        <link rel="stylesheet" href="./font_2454703_5oqsmwn7ddk/iconfont.css"> 
        <style>
*{
           margin: 0; 
           padding: 0;
}
        
    
ul{
            list-style: none;
}
body{
     overflow-x: hidden; 
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: none; 
    max-width: 90%;
   min-width: 320px; 
    margin: 0 auto;
    background: #fafafc; 
    font-size: 12px;  
}
 
div {
    box-sizing: border-box;
}
 
p {
    margin: 0;
}
 
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
 
 
a {
    text-decoration: none;
}
 
/* 顶部快捷导航 */
.short-search {
    position: fixed;
    z-index: 50;
    top: 0;
    width: 100%;
    /* max-width: 540px; */
    max-width: 90%;
    height: 50px;
     background-color:ghostwhite; 
     background: -webkit-linear-gradient(top,rgba(78, 77, 77, 0.4) ,rgba(109, 106, 106, 0.2)); 
}
 
/* 内容*/
.user {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 51px;
    height: 44px;
    /* background-color: purple; */
}
 
.user-icon {
    width: 22px;
    height: 22px;
    background: url(./img/13.png) no-repeat 1px -36px;
    background-size: 21px auto;
    margin: 3px 0;
}
 
.user span {
    flex: 1;
    color: #eee;
}

 
/* 搜索 */
.search {
    position: absolute;
    left: 5px;
    width: 85%;
    height: 28px;
    background-color: #fff;
    border-radius: 20px;
    margin: 8px;
}
 
.search p {
    line-height: 28px;
    padding-left: 36px;
    color: #aaa;
    font-size: 14px;
}
 
.search p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 28px;
    background: url(./img/13.png) no-repeat 15px 7px;
    background-size: 21px auto;
}
 

.banner {
   
    display: block;
    width: 100%; 
     position: relative;  
     overflow: hidden; 
    z-index: -1;  
 } 
 
 .banner img {
     width: 100%;  
     height: 50%;
     margin-top: -50px;
     vertical-align: top; 
}


.local-nav {
    
    display: flex;
    height: 64px;
    margin: -70px 12px 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 8px;
     
}
 
 
.local-nav li {
    flex: 1;
}
 
.local-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
 
.local-nav a [class^="local-nav-icon-"]  {
    width: 40px;
    height: 40px;
    background-color: rgb(243, 236, 236);
    background: url(./img/14.png) no-repeat 0 0;
    background-size: 40px auto;
    margin-bottom: 3px;
}
 
.local-nav a .local-nav-icon-icon2 {
    background-position: 0 -40px;
}
 
.local-nav a .local-nav-icon-icon3 {
    background-position: 0 -80px;
}
 
.local-nav a .local-nav-icon-icon4 {
    background-position: 0 -120px;
}
 
.local-nav a .local-nav-icon-icon5 {
    background-position: 0 -160px;
}
 
.local-nav li .local-nav-iconContent {
    color: #222;
    line-height: 1;
}


       
        .nav{
            width: 90%;
            height: 197.56px;
            margin: 10px auto;
            border-radius: 8px;
            overflow: hidden;
        }
        .nav .hang{
            width: 100%;
            height: 66.91px;
            display: flex;
           
        }
        .hang .lie{
            flex: 23%;
            line-height: 66.91px;
            border-right: 1px solid #fff;
            box-sizing: border-box;
            text-align: center;
        }
        .nav .lie:last-child{
            border: none;
        }
        .hang .lie:nth-child(1){
            flex: 31%;
        }
        
         .nav .a{
            background: linear-gradient(to right,#fa5956,#fb8650 54%);

        } 
        .nav .a .lie:last-child{
            flex: 46%;
            background: linear-gradient(to right,#ffbc49,#ffd252);
        }
        .nav .a .lie:first-child{
            background: url(./img/1.png) no-repeat right bottom;
            background-size: 73px auto;
            border-top-left-radius: 8px;
        }
        .nav .a .lie:nth-child(2){
            background: url(./img/2.png) no-repeat left bottom;
            background-size: 37px auto;
        }
        .nav .a .lie:last-child a{
            
            display: block;
            background: url(./img/3.png) no-repeat right bottom;
        
            text-align: center;
            position: relative;
            width: 100%;
            color: #a05416;
    
        }
        .nav .b{
            background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .nav .b .lie:first-child{
            background: url(./img/4.png) no-repeat right bottom;
           background-size: 79px auto;
        }
        .nav .b .lie:nth-child(2){
            background: url(./img/5.png) no-repeat left bottom;
           background-size: 37px auto;
        }
        .nav .c{
            background: linear-gradient(to right,#34c2aa,#6cd557);
        }
        .nav .c .lie:first-child{
            background: url(./img/6.png) no-repeat right bottom;
            background-size: 94px auto;
            border-bottom-left-radius: 8px;
        }
        .nav .c .lie:nth-child(2){
            background: url(./img/7.png)no-repeat left bottom;
            background-size: 61px auto;
        }
        
        .nav a{
             color: #fff; 
            text-decoration: none;
        }
        .b{
            margin: 1px 0;
        }

      
        .nav2{
            width: 90%;
            height: 110.06px;
            margin: 10px auto;
            display: flex;
           
            flex-wrap: wrap;
          
        }
        .nav2 li{
            flex: 20%;
            display: flex;
            justify-content: center;
            
           
   
        }
        .nav2 li a{
            text-decoration: none;
            color: #222;
            font-size: 12px;
            display: flex;
            align-items: center;
            flex-direction: column;
           }
        
        .subnav-icon{
            width: 28px;
            height: 28px;
            background-repeat:no-repeat ;
            display: block;
            background: url(./img/12.png);
            background-size: 28px;
        }
        .s2{
            background-position: 0 -28px;
        }
        .s3{
            background-position: 0 -56px;
        }
        .s4{
            background-position: 0 -84px;
        }
        .s5{
            background-position: 0 -112px;
        }
        .s6{
            background-position: 0 -140px;
        }
        .s7{
            background-position: 0 -168px;
        }
        .s8{
            background-position: 0 -196px;
        }
        .s9{
            background-position: 0 -224px;
        }
        .s10{
            background-position: 0 -252px;
        }

      /* 底部导航条 */
        .footer{
            width: 100%;
            height: 60px;
            margin: 10px autotrhekl6y w4u9y;
            display: flex;
        }
        .footer a{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            justify-content: center;
            color: #333;
        }

        </style>
    </head>
     
    <body>
    
        <!-- 顶部搜索栏部分 固定定位 -->
        <div class="short-search">
            <div class="search">
                <p>搜索:目的地/酒店/景点/航班号</p>
            </div>
            <div class="user">
                <span class="user-icon"> </span>
                <span>我 的</span>
            </div>
        </div>
    
        <!-- 横幅 -->
        <div class="banner">
            <a href="#">
                <img src="./img/11.jpg">
            </a>
        </div>
    
        <!-- 头部导航条 -->
        <ul class="local-nav">
            <li>
                <a href="#">
                    <span class="local-nav-icon-icon1"></span>
                    <span class="local-nav-iconContent">攻略·景点</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="local-nav-icon-icon2"></span>
                    <span class="local-nav-iconContent">门票·玩乐</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="local-nav-icon-icon3"></span>
                    <span class="local-nav-iconContent">美食林</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="local-nav-icon-icon4"></span>
                    <span class="local-nav-iconContent">周边游</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="local-nav-icon-icon5"></span>
                    <span class="local-nav-iconContent">一日游</span>
                </a>
            </li>
        </ul>
    
   <!-- 导航条 -->
   <div class="nav">
    <div class="hang a">
    <div class="lie"><a href="javascript:;"><span>酒店</span></a></div>
    <div class="lie"><a href="javascript:;"><span>民宿·客栈</span></a></div>
    <div class="lie"><a href="javascript:;"><span>特价·爆款</span></a></div>
    
    </div> 
    <div class="hang b">
      <div class="lie"><a href="javascript:;"><span>机票</span></a></div>
      <div class="lie"><a href="javascript:;"><span>火车票</span></a></div>
      <div class="lie"><a href="javascript:;"><span>汽车·船票</span></a></div>
      <div class="lie"><a href="javascript:;"><span>专车·租车</span></a></div>
    </div> 
    <div class="hang c">
      <div class="lie"><a href="javascript:;"><span>旅游</span></a></div>
      <div class="lie"><a href="javascript:;"><span>私家团</span></a></div>
      <div class="lie"><a href="javascript:;"><span>邮轮游</span></a></div>
      <div class="lie"><a href="javascript:;"><span>定制游</span></a></div>
    </div> 
  </div>
  
  <ul class="nav2">
<li><a href="javascript:;">
  <span class="subnav-icon"></span>
  <span>自由行</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s2"></span>
  <span>wifi电话卡</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s3"></span>
  <span>保险·签证</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s4"></span>
  <span>换钞·购物</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s5"></span>
  <span>向导·包车</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s6"></span>
  <span>特价机票</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s7"></span>
  <span>礼品卡</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s8"></span>
  <span>申卡·借钱</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s9"></span>
  <span>社区</span>
  </a>
</li>
<li><a href="javascript:;">
  <span class="subnav-icon s10"></span>
  <span>更多</span>
  </a>
</li>
  </ul>

  
  <div class="footer">
<a href="javascript:;">
  <span class="iconfont icon-dianhua2"></span>
  <span>电话</span>
</a>
<a href="javascript:;">
  <span class="iconfont icon-xiazai"></span>
  <span>下载客户端</span>
</a>
<a href="javascript:;">
  <span class="iconfont icon-wode"></span>
  <span>我的</span>
</a>
  </div>
  
    
</head>
<body>
    
</body>
</html>